<template>
  <div class="login-container">
    <div class="login_box">
      <div style="margin-bottom: 20px;margin-top: 20px">欢迎使用后台管理系统</div>
      <!--v-bind:model:用于给子组件传值-->
      <el-form ref="ruleFormRef"
               :model="data.ruleForm"
               :rules="data.rules"
               style="width: 100%">

        <el-form-item style="padding-left: 10px;padding-right: 10px" prop="username">
          <el-input placeholder="请输入账号" v-model="data.ruleForm.username" prefix-icon="User" />
        </el-form-item>
        <el-form-item style="padding-left: 10px;padding-right: 10px" prop="password">
          <el-input placeholder="请输入密码" v-model="data.ruleForm.password" prefix-icon="Lock"/>
        </el-form-item>、

        <div style="display: flex;justify-content: center;padding-bottom: 20px;margin-left: 10px;margin-right: 10px">
          <el-button type="primary" style="width: 100%" @click="doLogin">登录</el-button>
        </div>
      </el-form>

      <RouterLink to="/manager/home">跳转首页</RouterLink>

    </div>
  </div>
</template>

<script setup>
import {reactive,ref} from "vue";
import {useRouter} from "vue-router";

// 当前的路由
const router = useRouter()

//表单引用对象：通过他来判断表单提交的数据是否没问题
const ruleFormRef = ref();

const data=reactive({
  ruleForm:{
    username:"",
    password:"",
  },
  rules:{
    username:[
      {required: true,message:"请输入账号",trigger:"blur"},
      {min:3,message: "不能少于3位",trigger:"blur"},
    ],
    password:[
      {required: true,message:"请输入密码",trigger:"blur"},
      {min:6,message: "不能少于6位",trigger:"blur"},
    ]
  }
})

const doLogin = () => {
  alert("执行到后台")
  router.push("/manager/home")
}
</script>

<style scoped>
.login-container {
  background-image: url("https://www.cqytxy.edu.cn/images/banner001.jpg");
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
}

.login_box {
  width: 400px;
  position: absolute;
  top: 400px;
  right: 400px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px;
  margin: 0px;
  transform: translate(-50%, -50%);
}

</style>